<template>
  <div class="city">
    <div class="top">
      <!-- 搜索位置 -->
      <van-search
        v-model="searchValue"
        placeholder="城市/区域/位置"
        shape="round"
        show-action
        @cancel="cancel"
      />

      <!-- tab切换 -->
      <van-tabs v-model:active="tabActive" color="#ff9854" line-height="2">
        <!-- 第一种方式 -->
        <!-- <van-tab :title="allCity?.cityGroup?.title"></van-tab>S
      <van-tab :title="allCity?.cityGroupOverSea?.title"></van-tab> -->

        <!-- 第二种方式:遍历 -->
        <template v-for="(value, key, index) in allCities" :key="index">
          <van-tab :title="value.title" :name="key"></van-tab>
        </template>
      </van-tabs>
    </div>

    <!-- van-tab的内容展示 -->
    <div class="content">
      <template v-for="(value, key, index) in allCities" :key="index">
        <!-- <h2 v-show="tabActive === key">{{ value.title }}</h2> -->
        <!-- <city-group :group-data="groupData"></city-group> -->
        <city-group
          v-show="tabActive === key"
          :current-group="value"
        ></city-group>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";

import { getCityAll } from "@/services";
// import HYrequest from "@/services/request/index.js";

import useCityStore from "@/stores/modules/city";

import CityGroup from "./cpns/City-group.vue";

const router = useRouter();
const tabActive = ref();

// 1.搜索框返回事件
const searchValue = ref("");
const cancel = () => {
  router.back();
};

// 2.请求city的数据
// 方法一.直接在组件里面请求数据：数据直接在这里冗余，也不好管理
// HYrequest.get({
//   url: "/city/all",
// }).then((res) => {
//   console.log(res);
// });

// 方法二:在modules里面进行封装,直接返回一个promise，在这里直接调用
/* 
组件里发送网络请求缺点：
  1.如果网络请求发送过多，那么组价里处理网络请求的逻辑就会过多
  2.如果页面封装了很多子组件，子组件需要这些数据，那么就需要将数据传过去(Props)
*/
// const allCity = ref({});
// getCityAll()
//   .then((res) => {
//     console.log(res);
//     allCity.value = res.data;
//   })
//   .catch((err) => {
//     console.log(err);
//   });

// 方法三：请求store里面pinia封装的数据
const cityStore = useCityStore();
//  3.1 送请求数据
cityStore.fetchAllCitiesData();
const { allCities } = storeToRefs(cityStore);

// 3.2 获取选中标签后的数据
// 3.2.1 tabActive是tab的索引，但是如果是这样拿取数据的话，拿到的不是响应式数据
// const currentGroup = allCities[Object.keys(allCities)[tabActive.value]];
// 3.2.2 根据key从allCities获取数据,默认直接获取的数据不是响应式的,所以用computed
const currentGroup = computed(() => {
  return allCities.value[tabActive.value];
});
</script>

<style lang="less" scoped>
.city {
  // 默认是sticky,设置不了z-index
  // position: relative;
  // z-index: 9;
  // // 100视口
  // height: 100vh;
  // background-color: #fff;
  // overflow-y: auto;

  --van-tabs-line-height: 30px;
  //方法一:全局滚动
  // .top {
  //   position: fixed;
  //   top: 0px;
  //   left: 0px;
  //   right: 0px;
  //   // margin-bottom: 98px;
  // }

  // .content {
  //   margin-top: 98px;
  // }

  // 局部滚动
  .top {
    position: relative;
    z-index: 9;
  }
  .content {
    // height: calc(100vh - 100px);
    height: calc(100vh - 100px);
    overflow: auto;
  }
}
</style>
